@import "reset.less";
@import "kframes.less";
@import "common.less";
@import "idangerous.swiper.css";
body,
html {
  width: 100%;
  height: 100%; // overflow: hidden;
  font-size: 100px;
}

.clear:after {
  clear: both;
  content: ".";
  height: 0;
  visibility: hidden;
  font-size: 0;
  display: block;
}

.center-box {
  margin: 0 auto;
  width: @center-width;
}

//------------------------------loading部分-------------------
.m-loading{
  position: absolute;
  z-index: 999;
  top: 100%;
  left: 100%;
  background: #fff;
}
//--------------------------------m-main部分------------------
  .top {
    z-index: 99;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 0.6rem;
    background: #fff;
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.09);
    .logo {
      position: absolute;
      top: 0;
      left: 1.2rem;
      width: 1.56rem;
      height: 100%;
      cursor: pointer;
      img {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        width: 100%;
        height: 0.4rem;
      }
    }
    .menu{
      position: relative;
      width: 100%;
      height: 100%;
    }
    .other {
      position: absolute;
      top: 50%;
      right: 1.2rem;
      transform: translateY(-50%);
      height: 100%;
      font-size: 0;
      .box {
        display: inline-block;
        vertical-align: top;
        font-size: @font-size;
        color: @light-color;
        line-height: 0.6rem;
        text-align: center;
      }
      .en {
        width: 0.4rem;
        cursor: pointer;
      }
      .line {
        width: 1px;
        margin: 0 0.32rem;
      }
      .down-cjg,.down-paper {
        position: relative;
        cursor: pointer;
        a {
          display: block;
          position: relative;
          font-size: @font-size;
          color: @light-color;
          padding-right: 0.35rem;
        }
        .yun-down-icon {
          position: absolute;
          top: 50%;
          right: 0;
          transform: translateY(-50%);
          width: 0.2rem;
          height: 100%;
          background: url('../img/icon-down.svg') no-repeat center;
        }
      }
    }
    .nav {
      position: absolute;
      left: 50%;
      height: 0.6rem;
      transform: translateX(-50%);
      ul {
        font-size: 0;
        li {
          display: inline-block;
          vertical-align: top;
          margin-right: 100vw * (50 / 1920);
          a {
            line-height: 0.6rem;
            text-align: center;
            font-size: @font-size;
            color: #000;
          }
        }
        li:nth-last-child(1) {
          margin-right: 0;
        }
        li.current {
          a{
            color: #947953;
          }
        }
      }
    }
  }
    .banner-bg {
      position: relative;
      width: 100%;
      height: 9.5rem;
      background: url('../img/banner-bg.png') no-repeat center / cover;
      .center-box {
        padding-top: 2.4rem;
        width: 7.8rem;
        height: auto;
        margin: 0 auto;
        .banner-text-img {
          margin: 0 auto;
          width: 3.8rem;
          height: 2.44rem;
          background: url('../img/banner-text.png') no-repeat center / cover;
        }
        .banner-title {
          padding: 0.26rem 0 0.15rem 0;
          margin: 0 auto;
          width: 3.71rem;
          height: 0.22rem;
          line-height: 0.27rem;
          background: url('../img/dapp-title.png') no-repeat center / 2.26rem 0.18rem;
        }
        .line {
          width: 100%;
          height: 1px;
          opacity: 0.3;
          background: #91989E;
        }
        .banner-cont {
          margin: 0 auto;
          padding: 0.2rem 0 0.3rem 0;
          width: 6.4rem;
          color: #574327;
          font-size: 0.16rem;
          line-height: 0.24rem;
          text-align: center;
        }
        .bt-down-box{
          margin: 0 auto;
          width: calc(1.89rem * 2 + 0.6rem);
          height: 0.65rem;
          font-size: 0;
        }
        .bt-down {
          display: inline-block;
          vertical-align: top;
          width: 1.89rem;
          height: 0.65rem;
          background: url('../img/bt-down.png') no-repeat center / cover;
          a {
            display: block;
            width: 100%;
            height: 100%;
          }
        }
        .bt-down.left-bt{
          margin-right: 0.6rem;
        }
        .bt-down.right-bt{
          background: url('../img/bt-down-en.png') no-repeat center / cover;
        }
      }
    } // 第二层关于达摩币
    .about-dmb {
      background: rgb(254, 253, 252); // 头部板块
      .dmb-top {
        position: relative;
        width: 100%;
        height: 5rem;
        .damo-top-wrap {
          position: relative;
          left: 0;
          top: -1rem;
          width: 100%;
          height: 4rem;
          .top-dmb-box {
            padding-top: 0.9rem;
            width: 6.5rem;
            height: calc(4rem - 0.9rem);
            background: #fff url('../img/card-yun.png') no-repeat top left / 1.57rem 1rem;
            box-shadow: 0 0.8rem 0.5rem 0 rgba(148, 121, 83, 0.20);
            font-size: 0;
            .child {
              vertical-align: top;
              display: inline-block;
            }
            .left-small-title {
              margin: 0 0.3rem 0 0.7rem;
              padding: 0 0.1rem;
              height: 2.08rem;
              border: 1px solid #947953;
              font-size: 0.2rem;
              color: #574327;
              text-align: center;
              writing-mode: vertical-lr;
            }
            .right-cont {
              width: 4.3rem;
              height: 1.20rem;
              .big-title {
                width: 2.10rem;
                height: 0.50rem;
                margin-bottom: 0.3rem;
              }
              .what-cont {
                text-indent: 2em;
                font-size: 0.16rem;
                line-height: 0.22rem;
                color: #574327;
                opacity: 0.5;
              }
            }
          }
          .top-dmb-box:nth-child(1) {
            float: left;
            .big-title {
              background: url('../img/what-icon.svg') no-repeat center / cover;
            }
          }
          .top-dmb-box:nth-child(2) {
            float: right;
            .big-title {
              background: url('../img/why-icon.svg') no-repeat center / cover;
            }
          }
        }
      } // 第二层中间部分
      .damo-main {
        position: relative;
        width: 100%;
        height: 3.44rem;
        border: 1px solid #947953;
        margin-bottom: 1rem;
        font-size: 0;
        .main-child {
          display: inline-block;
          vertical-align: top;
          width: 50%;
          height: 100%;
        }
        .left-text {
          padding: 0.66rem 0 0 0.8rem;
          height: calc(3.44rem - 0.66rem);
          width: calc(7rem - 0.8rem);
          .border-text {
            position: absolute;
            top: -0.2rem;
            left: -1px;
            width: 3.77rem;
            height: 1.07rem;
          }
          .text-title {
            font-size: 0.36rem;
            color: #261D10;
            line-height: 0.43rem;
            margin-bottom: 0.35rem;
          }
          p {
            padding-left: 0.16rem;
            opacity: 0.8;
            font-size: 0.18rem;
            color: #574327;
            line-height: 0.4rem;
            height: 0.4rem;
            i {
              display: inline-block;
              vertical-align: top;
              width: 0.16rem;
              height: 0.4rem;
              margin-right: 0.08rem;
              background: url('../img/star-icon.svg') no-repeat center / 0.16rem 0.16rem;
            }
          }
        }
      }
      .damo-main.damo-problem {
        margin-bottom: 1.3rem;
        .border-text {
          background: url('../img/problem.png') no-repeat center / cover;
        }
        .right-img {
          background: url('../img/problem-about.png') no-repeat center / 6.60rem 3.04rem;
        }
      }
      .damo-main.damo-solution {
        .border-text {
          background: url('../img/solution.png') no-repeat center / cover;
        }
        .right-img {
          background: url('../img/solution-about.png') no-repeat center / 6.60rem 3.04rem;
        }
      }
    } 
    
    
    // 第三层达摩应用领域
    .application-damo {
      position: relative;
      width: 100%;
      height: 18.46rem;
      background: #F2F1EE;
      .app-cjg {
        width: 14.1rem;
        height: 8.28rem;
        font-size: 0;
        .app-cjg-img {
          display: inline-block;
          vertical-align: top;
          margin-right: 1.4rem;
          padding-top: 1rem;
          .for-img {
            width: 6.99rem;
            height: 6.79rem;
            background: url('../img/app-cjg.png') no-repeat center / cover;
          }
        }
        .app-cjg-text {
          display: inline-block;
          vertical-align: top;
          padding-top: 1.9rem;
          .head {
            margin-bottom: 0.7rem;
            .small-title {
              margin-bottom: 0.07rem;
              font-size: 0.24rem;
              line-height: 0.33rem;
              color: #947953;
            }
            .big-title {
              position: relative;
              width: 2.62rem;
              height: 0.61rem;
              border: 1px solid #947953;
              font-size: 0.32rem;
              text-align: center;
              line-height: 0.6rem;
              color: #000;
              .border-txt {
                position: absolute;
                top: -3px;
                left: -3px;
                padding-left: 0.05rem;
                width: 0.4rem;
                height: 0.46rem;
                background: #F2F1EE;
                font-size: 0.24rem;
                line-height: 0.33rem;
                color: #947953;
                text-align: left;
              }
            }
          }
          .cont {
            width: 5.71rem;
            .cont-about {
              font-size: 0.18rem;
              color: #574327;
              line-height: 0.25rem;
              text-indent: 2em;
            }
            .cont-about01 {
              margin-bottom: 0.2rem;
            }
            .cont-about02 {
              margin-bottom: 0.4rem;
            }
          }
          .bottom-down {
            .down-btn {
              display: inline-block;
              vertical-align: top;
              margin: 0 0.1rem;
              width: 1.77rem;
              height: 0.45rem;
              background: #947953;
              border-radius: 2px;
              a {
                position: relative;
                display: block;
                font-size: 0.18rem;
                line-height: 0.45rem;
              }
            }
          }
          .ios {
            a {
              padding-left: 0.73rem;
              width: calc(1.77rem - 0.73rem);
              i {
                position: absolute;
                top: 50%;
                left: 0.4rem;
                transform: translateY(-50%);
                width: 0.26rem;
                height: 0.26rem;
                background: url('../img/ios-icon.svg') no-repeat center / cover;
              }
            }
          }
          .android {
            a {
              padding-left: 0.69rem;
              width: calc(1.77rem - 0.69rem);
              i {
                position: absolute;
                top: 50%;
                left: 0.34rem;
                transform: translateY(-50%);
                width: 0.26rem;
                height: 0.26rem;
                background: url('../img/android-icon.svg') no-repeat center / cover;
              }
            }
          }
        }
      }
      .right-line {
        display: none;
        position: absolute;
        top: 7.02rem;
        right: 0;
        opacity: 0.1;
        width: (831 / 1920) * 100vw;
        border: 1px solid #574327;
      }
      .left-line {
        width: 100%;
        opacity: 0.2;
        border-bottom: 1px solid #574327;
      }
      .to-be-continued {
        margin-bottom: 1rem;
        padding-top: 0.6rem;
        .title {
          margin-bottom: 0.1rem;
          font-size: 0.36rem;
          color: #261D10;
          text-align: center;
          line-height: 0.43rem;
        }
        .title-en {
          margin-bottom: 0.6rem;
          font-size: 0.18rem;
          line-height: 0.21rem;
          color: #B7A58C;
          text-align: center;
        }
        .item {
          ul {
            margin: 0 auto;
            width: 2.7rem * 4;
            font-size: 0;
          }
          li {
            display: inline-block;
            vertical-align: top;
            margin: 0 1rem;
            width: 0.7rem;
            .icon {
              width: 0.7rem;
              height: 0.7rem;
              margin-bottom: 0.1rem;
            }
            .xbkt {
              background: url('../img/tobe-xbxt.svg') no-repeat center / cover;
            }
            .drg {
              background: url('../img/tobe-drg.svg') no-repeat center / cover;
            }
            .dmy {
              background: url('../img/tobe-dmy.svg') no-repeat center / cover;
            }
            .dmjs {
              background: url('../img/tobe-dmjs.svg') no-repeat center / cover;
            }
            .text {
              font-size: 0.16rem;
              color: #574327;
              line-height: 0.22rem;
              text-align: center;
            }
          }
        }
      }
      .product-time {
        width: 100%;
        height: 6.19rem;
        background: rgba(0, 0, 0, 0.03) url('../img/pc-product.png') no-repeat center / 14.02rem 5.2rem;
        .title{
          display: none;
        }
        .title-en{
          display: none;
        }
        .web-product{
          display: none;
        }
      }
    } 
    
    // 第四层团队
    .team-damo {
      padding: 1rem 0;
      .title {
        margin-bottom: 0.6rem;
        text-align: center;
        font-size: 0.36rem;
        line-height: 0.43rem;
        color: #574327;
        i {
          display: inline-block;
          vertical-align: top;
          line-height: 0.43rem;
          font-size: 0.28rem;
          margin: 0 0.1rem;
          height: 0.43rem;
          color: #D8D8D8;
        }
        span {
          display: inline-block;
          vertical-align: top;
          font-size: 0.36rem;
          color: #B7A58C;
          line-height: 0.43rem;
        }
      }
      .team-item {
        .swiper-box{
          margin: 0 auto;
          width: 14.2rem;
          height: auto;
          overflow: hidden;
        }
        .swiper-container {
          width: 14.2rem;
          height: 4.4rem;
          margin-bottom: 0.3rem; 
          .swiper-wrapper {
            width: 14rem;
            height: 4rem;
          }
          .swiper-slide {
            width: 14rem;
            height: 4rem;
            font-size: 0;
            overflow: hidden;
            .center{
              width: 14rem;
              height: 100%;
              margin: 0 auto;
            }
          }
        }
        .pagination {
          position: relative;
          height: 0.14rem;
          text-align: center;
          bottom: 5px;
          width: 100%;
          font-size: 0;
          .swiper-pagination-switch.swiper-active-switch{
            background: #947953;
          }
          .swiper-pagination-switch {
            display: inline-block;
            width: 0.14rem;
            height: 0.14rem;
            border-radius: 0.14rem;
            background: #D8D8D8;
            margin: 0 0.2rem;
            cursor: pointer;
          }
        }
        .card{
          display: inline-block;
          vertical-align: top;
          width: 3.1rem;
          height: 3.6rem;
          margin: 0.2rem;
          background: #FFFFFF;
          box-shadow: 0 0 0.1rem 0 rgba(148,121,83,0.20);
          border-radius: 0.08rem;
          -webkit-transition: all 0.3s;
          -o-transition: all 0.3s;
          -moz-transition: all 0.3s;
          transition: all 0.3s;
          .head{
            padding-top: 0.7rem;
            margin-bottom: 0.3rem;
            width: 100%;
            img{
              display: block;
              margin: 0 auto;
              width: 1.4rem;
              height: 1.4rem;;
            }
          }
          .name{
            font-size: 0.2rem;
            color: #261D10;
            text-align: center;
            line-height: 0.28rem;
            margin-bottom: 0.1rem;
          }
          .about{
            opacity: 0.7;
            font-size: 0.16rem;
            color: #574327;
            text-align: center;
          }
        }
        .card:hover{
          box-shadow: 0 0.1rem 0.5rem 0 rgba(148,121,83,0.50);
        }
      }
    } 
    
    // contact
    .contact-damo {
      width: 100%;
      // height: 6.23rem;
      background: #5B5B5A;
      .title {
        padding-top: 1rem;
        font-size: 0.36rem;
        color: #FFFFFF;
        text-align: center;
        margin-bottom: 0.6rem;
      }
      .item {
        position: relative;
        width: 100%;
        height: 0.8rem;
        margin-bottom: 0.8rem;
        ul {
          position: absolute;
          top:0;
          left: 50%;
          transform: translateX(-50%);
          height: auto;
          font-size: 0;
        }
        li {
          display: inline-block;
          vertical-align: top;
          width: 0.8rem;
          height: 0.8rem;
          margin: 0 0.6rem;
        }
        .wx {
          background: url('../img/wx-icon.svg') no-repeat center / cover;
        }
        .wx:hover {
          background: url('../img/wx-icon-active.svg') no-repeat center / cover;
        }
        .twitter {
          background: url('../img/twitter-icon.svg') no-repeat center / cover;
        }
        .twitter:hover {
          background: url('../img/twitter-icon-active.svg') no-repeat center / cover;
        }
        .e-mail {
          background: url('../img/e-mail.svg') no-repeat center / cover;
        }
        .e-mail:hover {
          background: url('../img/e-mail-active.svg') no-repeat center / cover;
        }
        .fb {
          background: url('../img/fb.svg') no-repeat center / cover;
        }
        .fb:hover {
          background: url('../img/fb-active.svg') no-repeat center / cover;
        }
        .qq {
          background: url('../img/qq-icon.svg') no-repeat center / cover;
        }
        .qq:hover {
          background: url('../img/qq-icon-active.svg') no-repeat center / cover;
        }
        .telegram {
          background: url('../img/telegram.svg') no-repeat center / cover;
        }
        .telegram:hover {
          background: url('../img/telegram-active.svg') no-repeat center / cover;
        }
      }
      .row {
        position: relative;
        width: 100%;
        height: 2rem;
        margin-bottom: 0.6rem;
        .box{
          display: flex;
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          height: auto;
          .child{
            display: block;
            width: 2rem;
            .img-box{
              img{
                width: 1.4rem;
                height: 1.4rem;
                margin: 0 auto;
                display: block;
              }
            }
            .text-box{
              color: #fff;
              font-size: 0.20rem;
              line-height: 0.6rem;
              text-align: center;
            }
          }
        }
        .social_wechat{
          align-items: center;
          
        }        
      }

      .footer {
        opacity: 0.5;
        font-size: 0.14rem;
        line-height: 0.4rem;
        color: #FFFFFF;
        letter-spacing: 0;
        text-align: center;
      }
    }
@media screen and (max-width: 1430px) {
 html{
   font-size: 80px;
 }
}
@media screen and (max-width: 1180px) {
  html{
    font-size: 70px;
  }
 }
 @import "mobile.less";